<!--
 * @FilePath     : /study_code/layui/15-73.html
 * @Description  : 表格中多选
 * @Date         : 2025-02-24 16:16
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-09 17:10:48
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <table id="demo" lay-filter="test"></table>

    <script src="/layui/dist/layui.js"></script>
    <script src="/xm-select/dist/xm-select.js"></script>
    <script>
      layui.use('table', function () {
        var table = layui.table

        //第一个实例
        table.render({
          elem: '#demo',
          page: true, //开启分页
          height: 500,
          cols: [
            [
              //表头
              { field: 'id', title: 'ID', width: 80, sort: true },
              { field: 'username', title: '用户名', width: 80 },
              { field: 'sex', title: '性别', width: 80, sort: true },
              { field: 'city', title: '城市', width: 80 },
              {
                field: 'sign',
                title: '爱好',
                width: 200,
                templet: function (d) {
                  return '<div id="XM-' + d.id + '" ></div>'
                },
              },
              { field: 'experience', title: '积分', width: 80, sort: true },
              { field: 'score', title: '评分', width: 80, sort: true },
              { field: 'classify', title: '职业', width: 80 },
              { field: 'wealth', title: '财富', width: 135, sort: true },
            ],
          ],
          data: [
            {
              id: 10000,
              username: 'user-0',
              sex: '女',
              city: '城市-0',
              sign: '签名-0',
              experience: 255,
              logins: 24,
              wealth: 82830700,
              classify: '作家',
              score: 57,
            },
            {
              id: 10001,
              username: 'user-1',
              sex: '男',
              city: '城市-1',
              sign: '签名-1',
              experience: 884,
              logins: 58,
              wealth: 64928690,
              classify: '词人',
              score: 27,
            },
            {
              id: 10002,
              username: 'user-2',
              sex: '女',
              city: '城市-2',
              sign: '签名-2',
              experience: 650,
              logins: 77,
              wealth: 6298078,
              classify: '酱油',
              score: 31,
            },
            {
              id: 10003,
              username: 'user-3',
              sex: '女',
              city: '城市-3',
              sign: '签名-3',
              experience: 362,
              logins: 157,
              wealth: 37117017,
              classify: '诗人',
              score: 68,
            },
            {
              id: 10004,
              username: 'user-4',
              sex: '男',
              city: '城市-4',
              sign: '签名-4',
              experience: 807,
              logins: 51,
              wealth: 76263262,
              classify: '作家',
              score: 6,
            },
            {
              id: 10005,
              username: 'user-5',
              sex: '女',
              city: '城市-5',
              sign: '签名-5',
              experience: 173,
              logins: 68,
              wealth: 60344147,
              classify: '作家',
              score: 87,
            },
            {
              id: 10006,
              username: 'user-6',
              sex: '女',
              city: '城市-6',
              sign: '签名-6',
              experience: 982,
              logins: 37,
              wealth: 57768166,
              classify: '作家',
              score: 34,
            },
            {
              id: 10007,
              username: 'user-7',
              sex: '男',
              city: '城市-7',
              sign: '签名-7',
              experience: 727,
              logins: 150,
              wealth: 82030578,
              classify: '作家',
              score: 28,
            },
            {
              id: 10008,
              username: 'user-8',
              sex: '男',
              city: '城市-8',
              sign: '签名-8',
              experience: 951,
              logins: 133,
              wealth: 16503371,
              classify: '词人',
              score: 14,
            },
            {
              id: 10009,
              username: 'user-9',
              sex: '女',
              city: '城市-9',
              sign: '签名-9',
              experience: 484,
              logins: 25,
              wealth: 86801934,
              classify: '词人',
              score: 75,
            },
          ],
          done: function (res) {
            //修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
            var cells = document.querySelectorAll('div[lay-table-id="demo"] .layui-table-cell')
            for (var i = 0; i < cells.length; i++) {
              //cells[i].style.overflow = 'unset';
              cells[i].style.height = 'auto' // 这里是让下拉选自动折行
            }
            //渲染多选
            res.data.forEach(item => {
              var xm = xmSelect.render({
                el: '#XM-' + item.id,
                autoRow: true,
                model: { type: 'fixed' },
                data: [
                  { name: '张三', value: 1 },
                  { name: '李四', value: 2 },
                  { name: '王五', value: 3 },
                ],
              })

              item.__xm = xm
            })
            //表格滚动时 重新计算位置
            document.querySelector('.layui-table-body').addEventListener('scroll', () => {
              xmSelect.get().forEach(function (item) {
                item.calcPosition()
              })
            })
          },
        })
      })
    </script>
  </body>
</html>
